<!-- 供应商表单配置或者详情 -->
<template>
  <div class="supplier-template">
    <pageHeader :title="title" :bread-crumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button html-type="submit" type="primary" @click="save">{{
          id > 0 ? '保存' : '添加'
        }}</a-button>
        <a-button @click="cancel">取消</a-button>
      </template>
    </pageHeader>
    <div class="content">
      <a-form :model="designForm.list" auto-label-width>
        <a-form-item
          label="表单名称："
          :label-col-style="{
            width: '100px',
            display: 'contents',
          }"
          required
        >
          <a-input
            :style="{
              width: '100%',
            }"
            size="large"
            placeholder="请输入表单名称"
            v-model="designForm.list.name"
          ></a-input>
        </a-form-item>

        <div>
          <h3>基本信息</h3>
          <div class="tips">
            <icon-info-circle-fill
              :style="{
                color: '#165DFF',
              }"
            />
            根据不同级别的供应商，勾选其必填项目
          </div>
          <div>
            <a-upload
              action="#"
              :fileList="file ? [file] : []"
              :show-file-list="false"
              @change="onChange"
              @progress="onProgress"
              class="avatar"
              :disabled="type !== 'add' && !isEdit"
            >
              <template #upload-button>
                <div
                  :class="`arco-upload-list-item${
                    file && file.status === 'error'
                      ? ' arco-upload-list-item-error'
                      : ''
                  }`"
                >
                  <div
                    class="arco-upload-list-picture custom-upload-avatar"
                    v-if="file && file.url"
                  >
                    <img :src="file.url" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                    <a-progress
                      v-if="file.status === 'uploading' && file.percent < 100"
                      :percent="file.percent"
                      type="circle"
                      size="mini"
                      :style="{
                        position: 'absolute',
                        left: '50%',
                        top: '50%',
                        transform: 'translateX(-50%) translateY(-50%)',
                      }"
                    />
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                      <div style="margin-top: 10px; font-weight: 600"
                        >Upload</div
                      >
                    </div>
                  </div>
                </div>
              </template>
            </a-upload>
          </div>
        </div>
      </a-form>
      <div class="content-header">
        <a-form :model="designForm" layout="vertical" auto-label-width>
          <a-form-item field="name" label="供应商名称：" required>
            <a-input
              disabled
              placeholder="请输入供应商名称"
              :style="{
                width: '100%',
              }"
              size="large"
            />
          </a-form-item>
        </a-form>
      </div>

      <div class="content-info">
        <a-form :model="designForm" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="customerNumber" label="供应商编号：" required>
                <a-input disabled placeholder="请输入供应商编号" size="large" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="level" label="供应商级别：" required>
                <a-input disabled v-model="levelName">
                  <a-option>123</a-option>
                </a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="customerNumber" label="联系电话：" required>
                <a-input disabled placeholder="请输入联系电话" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="customerNumber" label="联系地址：" required>
                <a-input disabled placeholder="请输入联系地址" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="customerNumber" label="省市区：" required>
                <a-input disabled placeholder="请输入省市区" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[1].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="联系邮箱："
                :required="designForm.list.form[1].required"
              >
                <a-input
                  disabled
                  :style="{
                    width: '100%',
                  }"
                  placeholder="请输入表单名称"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[2].required">
              </a-checkbox>
              <a-form-item
                field="level"
                label="供应商类别："
                :required="designForm.list.form[2].required"
              >
                <a-select placeholder="请选择供应商类别：" disabled> </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-checkbox
                value="1"
                :style="{
                  width: '100%',
                }"
                v-model="designForm.list.form[3].required"
              >
              </a-checkbox>

              <a-form-item
                field="level"
                label="供应商商品类别："
                :required="designForm.list.form[3].required"
              >
                <a-select placeholder="供应商商品类别" disabled> </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[4].required">
              </a-checkbox>
              <a-form-item
                field="level"
                label="供应商绩效评级："
                :required="designForm.list.form[4].required"
              >
                <a-select placeholder="请选择供应商绩效评级：" disabled>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-checkbox
                value="1"
                :style="{
                  width: '100%',
                }"
                v-model="designForm.list.form[5].required"
              >
              </a-checkbox>
              <a-form-item
                field="level"
                label="供应商领域："
                :required="designForm.list.form[5].required"
              >
                <a-select placeholder="请选择供应商领域" disabled> </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-form
          auto-label-width
          :model="designForm"
          layout="vertical"
          class="serve-table"
        >
          <a-checkbox
            value="1"
            v-model="designForm.list.form[6].required"
            class="serve"
          >
          </a-checkbox>
          <div
            :style="{
              border: '1px solid #f5f5f5',
            }"
          >
            <a-form-item
              field="name"
              label="可提供的产品或服务："
              :required="designForm.list.form[6].required"
            >
              <a-table
                bordered
                stripe
                :style="{
                  width: '100%',
                }"
              >
                <template #columns>
                  <a-table-column title="产品明细">
                    <a-table-column
                      title="产品名称"
                      data-index="first"
                      align="center"
                      :width="100"
                    >
                      <template #cell>
                        <a-input disabled></a-input>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="产品型号"
                      data-index="first"
                      align="center"
                      :width="100"
                    >
                      <template #cell>
                        <a-input disabled></a-input>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="产品规格"
                      data-index="first"
                      align="center"
                      :width="100"
                    >
                      <template #cell>
                        <a-input disabled></a-input>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="产品类型"
                      data-index="first"
                      align="center"
                      :width="100"
                    >
                      <template #cell>
                        <a-input disabled></a-input>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="备注"
                      data-index="first"
                      align="center"
                      :width="200"
                    >
                      <template #cell>
                        <a-textarea></a-textarea>
                      </template>
                    </a-table-column>
                    <!-- 操作item -->
                    <a-table-column
                      align="center"
                      :width="150"
                      fixed="right"
                      title="操作"
                    >
                      <template #cell="{ record, rowIndex }">
                        <a-popconfirm
                          @ok="deleteItem(record.id, rowIndex)"
                          content="确定删除吗"
                          type="error"
                        >
                          <a-button
                            type="text"
                            :style="{
                              color: 'red',
                            }"
                            >删除</a-button
                          >
                        </a-popconfirm>
                      </template>
                    </a-table-column>
                  </a-table-column>
                </template>
              </a-table>
            </a-form-item>
          </div>
        </a-form>
      </div>

      <h3>联系人信息</h3>
      <div class="content-info">
        <a-form :model="designForm" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[7].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="联系人姓名："
                :required="designForm.list.form[7].required"
              >
                <a-input disabled placeholder="请输入联系人姓名"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[8].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="联系人电话："
                :required="designForm.list.form[8].required"
              >
                <a-input disabled placeholder="请输入联系人电话"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[9].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="联系人职位："
                :required="designForm.list.form[9].required"
              >
                <a-input disabled placeholder="请输入联系人职位"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[10].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="联系人部门："
                :required="designForm.list.form[10].required"
              >
                <a-input disabled placeholder="请输入联系人部门"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <h3>客户账户信息</h3>
      <div class="content-info">
        <a-form :model="designForm" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[11].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="账户名称："
                :required="designForm.list.form[11].required"
              >
                <a-input disabled placeholder="请输入账户名称"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[12].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="银行账号："
                :required="designForm.list.form[12].required"
              >
                <a-input disabled placeholder="请输入银行账号"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[13].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="开户省市："
                :required="designForm.list.form[13].required"
              >
                <a-input disabled placeholder="请输入开户省市"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[14].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="开户银行："
                :required="designForm.list.form[14].required"
              >
                <a-input disabled placeholder="请输入开户银行"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <h3>备注信息</h3>
      <div class="content-info">
        <a-form :model="designForm" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-checkbox value="1" v-model="designForm.list.form[15].required">
              </a-checkbox>
              <a-form-item
                field="customerNumber"
                label="备注信息："
                :required="designForm.list.form[15].required"
              >
                <a-textarea
                  placeholder="请输入备注信息"
                  show-word-limit
                  allow-clear
                  :auto-size="{
                    minRows: 5,
                  }"
                  disabled
                  max-length="300"
                ></a-textarea>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <Enterprise></Enterprise>
      <a-form :model="designForm.list.form" auto-label-width>
        <a-checkbox
          value="1"
          class="serve"
          v-model="designForm.list.form[17].required"
          >其他附件</a-checkbox
        >
        <a-form-item
          :content-flex="false"
          :required="designForm.list.form[17].required"
        >
          <div>
            <a-input
              disabled
              :style="{
                margin: '10px 0px',
                width: '320px',
              }"
              size="large"
              placeholder="请输入附件标题"
            ></a-input>
          </div>

          <a-upload draggable action="/" disabled>
            <template #upload-button>
              <div
                style="
                  background-color: var(--color-fill-2);
                  color: var(--color-text-1);
                  border: 1px dashed var(--color-fill-4);
                  height: 50px;
                  width: 380px;
                  border-radius: 2;
                  line-height: 50px;
                  text-align: center;
                "
              >
                <div>
                  将文件拖到此处或
                  <span style="color: #3370ff">点击上传</span>
                </div>
                <span> 仅支持pdf、doc、docx、wps文件格式，大小不超过20MB </span>
              </div>
            </template>
          </a-upload>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watchEffect } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useBuyStore } from '@/store';
  import {
    GetSupplierTemplateDetailInfo,
    GetSupplierLevelInfo,
    PostSupplierTemplateInfo,
  } from '@/api/buy-management/supplier-management/base-setting';

  const router = useRouter();
  const route = useRoute();
  const store = useBuyStore();
  let id = ref(route.query.id);
  let levelName: any = ref(route.query.levelName || '一级');
  const breadCrumb: string[] = [
    '采购管理',
    '基础设置',
    '供应商信息模板',
    '新建供应商录入表单',
  ];
  let title = '新建供应商录入模板';

  // 判断是新增还是编辑
  if (id.value) {
    breadCrumb[3] = '编辑供应商录入表单';
    title = '编辑供应商录入模板';
  }

  const designForm = reactive({
    list: {
      name: '',
      form: [
        {
          comeName: 'logo',
          required: false,
        },
        {
          comeName: 'email',
          required: false,
        },
        {
          comeName: 'type',
          required: false,
        },
        {
          comeName: 'category',
          required: false,
        },

        {
          comeName: 'rate',
          required: false,
        },
        {
          comeName: 'specialty',
          required: false,
        },

        {
          comeName: 'serve',
          required: false,
        },
        {
          comeName: 'contactName',
          required: false,
        },
        {
          comeName: 'contactPhone',
          required: false,
        },

        {
          comeName: 'contactJob',
          required: false,
        },
        {
          comeName: 'contactDept',
          required: false,
        },
        {
          comeName: 'account',
          required: false,
        },
        {
          comeName: 'bankAccount',
          required: false,
        },
        {
          comeName: 'openCity',
          required: false,
        },
        {
          comeName: 'openBank',
          required: false,
        },
        {
          comeName: 'remark',
          required: false,
        },
        {
          comeName: 'file',
          required: false,
        },
      ],
    },
  });

  // 获取详情数据
  const getDataDetail = async () => {
    try {
      const res = await GetSupplierTemplateDetailInfo({ id: id.value });
      designForm.list = res.design;
      designForm.list.form.forEach((item: any) => {
        if (item.required === 1) item.required = true;
        else item.required = false;
      });
    } catch (err: unknown) {
      console.log(err);
    }
  };

  watchEffect(() => {
    if (id.value) {
      getDataDetail();
    }
  });

  const save = () => {
    store.currSupplierForm = designForm.list;
    router.back();
  };

  defineExpose({ designForm });
</script>

<style scoped lang="less">
  .supplier-template {
    .content {
      padding: 10px 60px 10px 20px;

      .avatar {
        position: absolute;
      }

      .tips {
        position: relative;
        bottom: 34px;
        left: 100px;
        color: red;
      }
      .form-name {
        :deep(.arco-checkbox-label) {
          width: 100%;
        }
      }

      &-header {
        padding: 0 100px;
        :deep(.arco-form-item-content-flex) {
          display: block;
          line-height: 32px;
          color: #cccccc29;
        }
      }

      &-info {
        padding: 0 100px;
        :deep(.arco-checkbox-icon) {
          top: 9px;
        }
        :deep(.arco-checkbox) {
          position: absolute;
        }
        :deep(.arco-form-item-label-col) {
          padding-right: 0;
        }
        .serve-table {
          :deep(.arco-checkbox-icon) {
            top: 4px;
            right: 25px;
          }
        }
      }

      &-file {
        padding: 0 100px;
      }
    }
  }
</style>
